<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <!-- 
        vue 接入步骤
        1. 先下载 vue.js 下载地址：https://unpkg.com/vue@3/dist/vue.global.js
        2. 在 html 中导入 vue.js
        3. 创建一个 vue 实例


     -->
</head>

<body>
    <!-- 页面的模板 -->
    <div id="app">
        <button @click="count++">
            count: {{ count }}
        </button>

        <input type="text" v-model="message">
        <h3>您输入的是：{{message}}</h3>

    </div>
</body>
<script>
    // console.log(Vue);

    // 先解构创建实例的方法 createApp
    const { createApp } = Vue

    // 通过创建方法创建一个 app 实例
    const app = createApp({
        // data 是一个选项，该选项是一个函数，在函数中 return 出的
        // 内容是一个对象，该对象中的内容是模板中所使用到的数据
        data() {
            // 因为其要让每个组件或每个页面都能够有自己独立的作用域
            // 让每个页面的数据不会相互污染
            return {
                count: 100,
                message: ''
            }
        },
    })

    // 通过该方法将 app 实例和 id 为 app 的标签进行关联绑定
    app.mount('#app')

</script>

</html>